<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">

    <style>
        .user-item{
            width: 40%;
            height: 80px;
            overflow: hidden;
            display: inline-block;
            border:1px solid lightgray;
            background-color: #f6f6ff;
            vertical-align: top;
        }
        .avatar{
            width: 80px;
            height: 80px;
            display: inline-block;
            vertical-align: top;

        }
        .avatar img{
            width: 64px;
            height: 64px;
            vertical-align: top;

        }
        .name{
            vertical-align: top;
            margin-top: 20px;

            display: inline-block;
            width: auto ;
        }

        .btn-group{
            display: inline-block;
            margin-top: 20px;
        }


    </style>
</head>
<body onload="checkLogin()">
    <input type="text" id="username" name="username" placeholder="请输入用户名（不是昵称）">
    <input type="button" id="submit_btn" onclick="srch()" value="搜索">
    <div class="result-list">
        <div class="user-item">
            <div class="avatar"><img src="../../img/avatar/default.png"></div>
            <div class="name">hhhh</div>
            <div class="btn-group"><button class="my-button" onclick="sendRequest()">添加好友</button></div>
        </div>
        <div class="user-item">
            <div class="avatar"><img src="../../img/avatar/default.png"></div>
            <div class="name">hhhh</div>
            <div class="btn-group"><button class="my-button" onclick="sendRequest()">添加好友</button></div>
        </div>
        <div class="user-item">
            <div class="avatar"><img src="../../img/avatar/default.png"></div>
            <div class="name">hhhh</div>
            <div class="btn-group"><button class="my-button" onclick="sendRequest()">添加好友</button></div>
        </div>
        <div class="user-item">
            <div class="avatar"><img src="../../img/avatar/default.png"></div>
            <div class="name">hhhh</div>
            <div class="btn-group"><button class="my-button" onclick="sendRequest()">添加好友</button></div>
        </div>
        <div class="user-item">
            <div class="avatar"><img src="../../img/avatar/default.png"></div>
            <div class="name">hhhh</div>
            <div class="btn-group"><button class="my-button" onclick="sendRequest()">添加好友</button></div>
        </div>
        <div class="user-item">
            <div class="avatar"><img src="../../img/avatar/default.png"></div>
            <div class="name">hhhh</div>
            <div class="btn-group"><button class="my-button" onclick="sendRequest()">添加好友</button></div>
        </div>
    </div>

    <script src="../../lib/jquery-3.7.0.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script>

        var user = null;
        /**
         * 登录。。
         */
        function checkLogin(){
            console.log("checking login")
            $.post({
                url: 'http://localhost:8080/login/checkLogin',
                async:false,
                method: 'POST',
                crossDomain: true,
                xhrFields: { withCredentials: true },
                success: function (msg) {
                    let user = msg.data.user;
                    //    user是
                    if(user == null){
                        layer.msg("请登录");
                        window.location.href='../home.html';
                    }
                    window.user = user;
                }, error: function (error) {
                    console.log(error)
                }
            })
        }


        function appendDatas(list) {

        }

        function srch(){
            let username = $("#username").val();
            if(username.length === 0){
                layer.msg("用户名不能为空");
            }
            $.ajax({
                url: 'http://localhost:8080/user/friendSrch',
                async:false,
                method: 'POST',
                crossDomain: true,
                xhrFields: { withCredentials: true },
                data:{
                    userId : user.base.id,
                    username: username
                },
                success: function (msg) {
                    console.log(msg);
                    appendDatas(msg.data.list);

                }
            })
        }
    </script>

</body>
</html>